Javascript is required

Mar 6, 2021

Windi CSS：次世代 Tailwind CSS コンパイラ

Windi CSS：次世代 Tailwind CSS コンパイラ

Windi CSS は Tailwind CSS 2.0完全互換の動的生成コンパイラです。

Tailwind CSS を使った場合、初期ビルド時間が非常に長くなってしまう場合がありますが、Windi CSS を使うことでビルド時間を短縮し、リロード時も高速に表示することができます。

機能について

  • 実行速度
  • 変数とバリアントの自動推定
  • 構成ファイルの互換性
  • ブラウザ互換性

⚡️ 速度

CSS 内のユーティリティとディレクティブを検出し、動的で処理します。これにより、コンパイル速度が大幅に向上されます。 Windi CSS は、使用する CSS のみをロードするので、パージする必要がありません。

😎 変数とバリアントの自動推定

数値、サイズ、スコア、色などのカスタム変数を設定する必要はありません。 Windi CSS は、クラスのセマンティクスに基づいてそれらを自動的に生成します。

たとえば、 p-3.2を使用すると、それが利用可能になり、そのまま機能します。

⚙️ 構成ファイルの互換性

Windi CSS は Tailwind CSS の構成ファイルを使用できます。

✅ ブラウザの互換性

すべてのユーティリティ用に生成されたCSSはすでにブラウザ互換であるため、必要がない限り autoprefixer を使用する必要がありません。

Windi CSS に追加されている機能について

  • ユーティリティグループ
  • スクリーンユーティリティ
  • より高機能なライト/ダークテーマのサポート
  • 変数とバリアントの自動推定

🎳 ユーティリティグループ

括弧でグループ化することで、同じバリアントに複数のユーティリティを適用することができます。

<div class="bg-white font-light sm:hover:(bg-gray-100 font-medium)"/>

🖥 スクリーンユーティリティ

+ や - の画面ユーティリティを使うことができます、カスタマの画面サイズにも適用します。

sm: @media (min-width:640px);
+sm: @media (min-width:640px) and (max-width:768px);
-sm: @media (max-width:640px);

🌓 より高機能なライト/ダークテーマのサポート

Windi CSS はすべての CSS 疑似要素と疑似クラス に対応しています。

また、prefers-color-scheme に基づいて @dark、 @light のクラスも追加しました。

🤖 変数とバリアントの自動推定

Windi CSS は使用されたCSSユーティリティのみを生成するため、数値やサイズ、スコア、色などのカスタム変数を設定する必要がなくなりました。

Windi CSS は自動的にユーティリティを検出し、適切なアルゴリズムに基づいてクラスを生成します。

また、変数名を渡すこともできるので、CSS変数（CSSカスタムプロパティ）との組み合わせは非常に便利です。

数字

p-${float[0,...infinite]} -> padding: ${float/4}rem

p-2.5 -> padding: 0.625rem;
p-3.2 -> padding: 0.8rem;

サイズ

// ${size} must end up with rem|em|px|vh|vw|ch|ex
p-${size} -> padding: ${size}

p-3px -> padding: 3px;
p-4rem -> padding: 4rem;

分数

w-${fraction} -> width: ${fraction -> precent}

w-9/12 -> width: 75%;

カラー

bg-${color} -> background-color: rgba(...)

bg-gray-300 -> background-color: rgba(209, 213, 219, var(--tw-bg-opacity);

bg-hex-${hex} -> background-color: rgba(...)

bg-hex-1c1c1e -> background-color: rgba(28, 28, 30, var(--tw-bg-opacity));

CSS変数（CSSカスタムプロパティ）

bg-$${variableName}

.bg-$test-variable {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--test-variable), var(--tw-bg-opacity));
}

🔰 始め方

最近流行りのフロントエンドツール Vitejs を使って Windi CSS の環境構築と実際に動かすところまでをやっていきます。

Vite のインストール

Viteテンプレートの生成

npm init @vitejs/app

テンプレートの中で自分が好きのを選んでプロジェクトフォルダに移動

cd [project name]

依存項目のインストール

npm install

Devサーバーを起動

npm run dev

Windi CSS プラグインのインストール

vite-plugin-windicss のインストール

npm i vite-plugin-windicss -D # yarn add vite-plugin-windicss -D

プロジェクトのルートディレクトリのvite.config.tsを編集

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss' // 追加

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    WindiCSS(), // 追加
  ],
})

動作確認

src/main.ts ファイルに Windi CSS をインポート

src/main.ts
import 'virtual:windi.css'

設定は簡単なので、短時間ですぐ使えます、
ぜひ Vite と Windi CSS の速さを体験してください。

ソースコード
Tailwind CSS からの移行ガイド

翻訳元：WindiCSS Doce

参考・リンク

  • Windi CSS
  • WindiCSS Doce
  • vite-plugin-windicss
  • vite-windi-starter
  • Vitejs
Tags
cd ..